function graphTrace(obj) {
	var zindex = 100;
	var pid = $(obj).attr('pid');

	// 处理使用js跟踪当前节点坐标错乱问题
	$('#changeImg').on('click', function() {
		$('#workflowTraceDialog').dialog('close');
		if ($('#imgDialog').length > 0) {
			$('#imgDialog').remove();
		}
		$('<div/>', {
			'id' : 'imgDialog',
			title : '此对话框显示的图片是由引擎自动生成的，并用红色标记当前的节点',
			html : "<img src='" + kl.ctx + '/workflow/activitiProcess/trace/auto/' + pid + "' />"
		}).appendTo('body').dialog({
			title : '查看流程进度',
			width : document.documentElement.clientWidth * 0.95,
			height : document.documentElement.clientHeight * 0.95,
			closed : false,
			modal : true
		});
	});

	// 获取图片资源
	var imageUrl = kl.ctx + "/workflow/activitiProcess/resource/process-instance?pid=" + pid + "&type=image";
	$.getJSON(kl.ctx + '/workflow/activitiProcess/process/trace?pid=' + pid, function(infos) {
		var positionHtml = "";
		// 生成图片
		var varsArray = new Array();
		$.each(infos, function(i, v) {
			var $positionDiv = $('<div/>', {
				'class' : 'activity-attr'
			}).css({
				position : 'absolute',
				left : (v.x + 9),
				top : (v.y + 34),
				width : (v.width - 2),
				height : (v.height - 2),
				backgroundColor : 'black',
				opacity : 0,
				zIndex : zindex - 1
			});

			// 节点边框
			var $border = $('<div/>', {
				'class' : 'activity-attr-border'
			}).css({
				position : 'absolute',
				left : (v.x + 9),
				top : (v.y + 34),
				width : (v.width - 4),
				height : (v.height - 3),
				zIndex : zindex - 2
			});

			if (v.currentActiviti) {
				$border.addClass('ui-corner-all-12').css({
					border : '3px solid red'
				});
			}
			positionHtml += $positionDiv[0].outerHTML + $border[0].outerHTML;
			varsArray[varsArray.length] = v.vars;
		});

		if ($('#workflowTraceDialog').length == 0) {
			$(
					'<div/>',
					{
						id : 'workflowTraceDialog',
						title : '查看流程（按ESC键可以关闭）',
						html : "<div><img src='" + imageUrl + "' style='position:absolute; left:10px; top:35px;' />"
								+ "<div id='processImageBorder'>" + positionHtml + "</div>" + "</div>"
					}).appendTo('body');
		} else {
			$('#workflowTraceDialog img').attr('src', imageUrl);
			$('#workflowTraceDialog #processImageBorder').html(positionHtml);
		}

		// 设置每个节点的data
		$('#workflowTraceDialog .activity-attr').each(function(i, v) {
			$(this).data('vars', varsArray[i]);
		});

		// 打开对话框
		$('#workflowTraceDialog').dialog(
				{
					modal : true,
					resizable : false,
					dragable : false,
					onOpen : function() {
						// 此处用于显示每个节点的信息，如果不需要可以删除
						$('.activity-attr').tooltip(
								{
									content : function() {
										var vars = $(this).data('vars');
										var tipContent = "<table class='need-border'>";
										$.each(vars, function(varKey, varValue) {
											if (varValue) {
												tipContent += "<tr><td class='label'>" + varKey + "</td><td>"
														+ varValue + "<td/></tr>";
											}
										});
										tipContent += "</table>";
										return tipContent;
									},
									position : 'bottom'
								});
						// end qtip
					},
					onClose : function() {
						$('#workflowTraceDialog').remove();
					},
					width : document.documentElement.clientWidth * 0.95,
					height : document.documentElement.clientHeight * 0.95
				});

	});
}
function cliamTask(taskId, todoGridId, claimGridId) {
	var url = kl.ctx + "/workflow/activitiProcessInstance/task/claim/" + taskId;
	$.get(url, function(result) {
		$.messager.show({
			msg : result.msg,
			icon : "info",
			position : "bottomRight"
		});
		if (result.success) {
			$(todoGridId).datagrid("load");
			$(claimGridId).datagrid("load");
		}
	}, 'json');
}
function handleTask(taskId, gridId) {
	var opts = {
		width : 550,
		minWidth : 450,
		height : 350,
		minHeight : 250,
		title : "任务办理",
		iconCls : "icon-hamburg-future",
		maximizable : true,
		collapsible : true,
		buttons : [ {
			text : '提交',
			handler : function() {
				var data = $form.serialize();
				$.post(kl.ctx + '/workflow/activitiProcessInstance/task/complete/' + taskId, data, function(data) {
					$(gridId).datagrid("load");
					$.messager.show({
						msg : data.msg,
						icon : "info",
						position : "bottomRight"
					});
					$dynamicFormDialog.dialog('close');
				});
			}
		} ],
		onOpen : function() {
			$dynamicFormDialog.find('input.easyui-validatebox').validatebox({
				required : true
			});
			$dynamicFormDialog.find('input.easyui-combobox').combobox();
			$dynamicFormDialog.find('input.easyui-datebox').datebox();
		}
	};
	var $dynamicFormDialog = $('<div/>', {
		'id' : 'dynamic-form-dialog'
	}).html("<form class='dynamic-form' method='post'><table class='dynamic-form-table'></table></form>");
	var $form = $dynamicFormDialog.find('.dynamic-form');
	// 读取启动时的表单
	$.getJSON(kl.ctx + '/workflow/activitiProcessInstance/task/get-form/' + taskId, function(datas) {
		var trs = "";
		$.each(datas.taskFormData.formProperties, function() {
			var className = this.required === true ? "easyui-validatebox" : "";
			this.value = this.value ? this.value : "";
			trs += "<tr>" + createFieldHtml(this, datas, className)
			if (this.required === true) {
				trs += "<span style='color:red'>*</span>";
			}
			trs += "</td></tr>";
		});
		// 添加table内容
		$dynamicFormDialog.find('.dynamic-form-table').html(trs)
		$dynamicFormDialog.dialog(opts);
	});
}
/**
 * form对应的string/date/long/enum/boolean类型表单组件生成器 fp_的意思是form paremeter
 */
var formFieldCreator = {
	'string' : function(prop, datas, className) {
		var result = "<td width='120'>" + prop.name + "：</td>";
		if (prop.writable === true) {
			result += "<td><input type='text' id='" + prop.id + "' name='fp_" + prop.id + "' class='" + className
					+ "' value='" + prop.value + "' />";
		} else {
			result += "<td>" + prop.value;
		}
		return result;
	},
	'date' : function(prop, datas, className) {
		var result = "<td width='120'>" + prop.name + "：</td>";
		if (prop.writable === true) {
			result += "<td><input type='text' id='" + prop.id + "' name='fp_" + prop.id + "' class='easyui-datebox "
					+ className + "' value='" + prop.value + "'/>";
		} else {
			result += "<td>" + prop.value;
		}
		return result;
	},
	'enum' : function(prop, datas, className) {
		var result = "<td width='120'>" + prop.name + "：</td>";
		if (prop.writable === true) {
			result += "<td><select id='" + prop.id + "' name='fp_" + prop.id + "' class='easyui-combobox " + className
					+ "'>";
			$.each(datas[prop.id], function(k, v) {
				result += "<option value='" + k + "'>" + v + "</option>";
			});
			result += "</select>";
		} else {
			result += "<td>" + prop.value;
		}
		return result;
	}
};

/**
 * 生成一个field的html代码
 */
function createFieldHtml(prop, datas, className) {
	return formFieldCreator[prop.type.name](prop, datas, className);
}